<!--角色管理组件 -->
<template>
  <div >
	  <el-dialog title="添加角色" :visible.sync="addDialogStatus">
	  	<el-form label-width="80px">
	  		<el-form-item label="角色名称">
	  			<el-input type="text" v-model="updateParam.roleName"></el-input>				
	  		</el-form-item>
	  	</el-form>
	  	<div slot="footer">
	  		<el-button @click="addDialogStatus = false">取消</el-button>
	  		<el-button type="primary" @click="addRole">提交</el-button>
	  	</div>
	  </el-dialog>
	  
	  <el-dialog  title="授权" :visible.sync="setAutDialogStatus" width="500px">
	  	<div class="tree">
	  		<el-tree
	  		  :data="menuTree"
	  		  show-checkbox
	  		  node-key="menuId"
			  :default-checked-keys="defaultMenuId"
	  		 ref="tree"
	  		  :props="defaultProps">
	  		</el-tree>
			<div class="tree-btn">
			  <el-button @click="resetChecked">清空</el-button>
			</div>
	  	</div>
	  	<div slot="footer">
	  		 <el-button @click="setAutDialogStatus = false">取消</el-button>
	  		 <el-button type="primary" @click="setRoles">提交</el-button>
	  	</div>
	  </el-dialog>
	  
	  <div class="topNav">
		<el-button type="primary" size="small" @click="addDialogStatus=true">新增角色</el-button>
	  </div>
	  <div class="topNav">
	  <el-button type="primary" size="small" @click="loadActiveRole">只看有效</el-button>	
	  <el-button type="primary" size="small" @click="loadRole">展示所有</el-button>	
	  </div>
	<el-table stripe="true"  :data="roleList">
		<el-table-column stripe type="index" label="No." align="center" width="100px">
		</el-table-column>	
		<el-table-column prop="roleName" label="角色名" width="200">
		</el-table-column>
		<el-table-column prop=" " label="可操作" width="200">
		</el-table-column>
		<el-table-column prop="roleState" :formatter="roleState" label="状态" width="260">
		</el-table-column>

		<el-table-column  label="操作" width="246">
			<template slot-scope="scope">
				<el-button type="danger" v-if="scope.row.roleState==1?true:false" el-icon-warning size="small" round @click="banRole(scope.row)">禁用</el-button>
				<el-button type="primary" v-else size="small" round @click="activeRole(scope.row)">启用</el-button>
				<el-button type="primary" :disabled="scope.row.roleState==0?true:false" size="small" round @click="setAuthority(scope.row)">授权</el-button>
			</template>
		</el-table-column>
	</el-table>	
  </div>
</template>

<script>
export default {
  name: 'system-role',
  data(){
	  return{
		  updateParam:{
			roleName:null,	
		  },
		  defaultProps:{
		  	label:"menuName",
		  	children:"children",
		  	// isLeaf:
		  },	
			setRolesParam:{
				menuIds:[],
				roleId:null,
				roleState:null
			},
		  addDialogStatus:false,
		  setAutDialogStatus:false,
		  roleList:[],
		  menuTree:[],
		  defaultMenuId:[]
	  }
  },  
  methods:{
	  loadRole(){
		  this.$http.get("/role/query").then(resp => { 
		  	 if(resp.data.flag) { 
		  		 this.roleList = resp.data.data;	
		  	 } 
		  })
	  },
	  loadActiveRole(){
		  this.$http.get("/role/queryByProject").then(resp => {
		  	 if(resp.data.flag) { 
		  		 this.roleList = resp.data.data;	
		  	 } 
		  })
	  },
	  roleState(a, b, cellValue){
		  if (cellValue == 1) {
		  	return "有效";
		  } else  {
		  	return "禁用"
		  } 
	  },
		activeRole(rowObj){	
			this.$http.post("/role/active/"+rowObj.roleId).then(resp => {
				 if(resp.data.flag) { 
					this.loadRole()
				 } 
			})
		},
		banRole(rowObj){
			this.$http.post("/role/ban/"+rowObj.roleId).then(resp => {
				 if(resp.data.flag) { 
					this.loadRole()
				 } 
			})
		},
		addRole(){
			this.$http.post("/role/save",this.updateParam).then(resp => {
				console.log(this.updateParam)
				 if(resp.data.flag) { 
					this.loadRole();
					this.addDialogStatus=false;
					this.updateParam={}
				 } 
			})
		},
		//加载所有菜单
		loadAllMenu(){
				  this.$http.get("/menu/loadAllMenu").then(resp => {
				  	 if(resp.data.flag) { 
				  		this.menuTree=resp.data.data
				  	 } 
				  })
		},
		//加载某角色的菜单信息
		loadRoleMenus(roleId){
			// console.log(roleId)
			this.$http.get("/menu/loadMenu/"+roleId).then(resp=>{					
				if(resp.data.flag){
					this.defaultMenuId=resp.data.data
					this.$refs.tree.setCheckedNodes(this.defaultMenuId)
					// console.log(this.defaultMenuId)
				}
			})
		},
		//授权弹出框
		setAuthority(rowObj){
			this.setAutDialogStatus=true;
			this.setRolesParam.roleId=rowObj.roleId;
			this.setRolesParam.roleState=rowObj.roleState;
			this.loadAllMenu();
			this.loadRoleMenus(rowObj.roleId);
		},
		
		//授权
		setRoles(){
			let checkedNodes=this.$refs.tree.getCheckedNodes(false,true);
			this.setRolesParam.menuIds=[];
			for(let i=0;i<checkedNodes.length;i++){
				this.setRolesParam.menuIds.push(checkedNodes[i].menuId);
			}
			// console.log(this.setRolesParam)
			this.$http.post("/roleMenu/authority/",this.setRolesParam).then(resp=>{
				if(resp){
					// console.log("成功！")
					this.setAutDialogStatus=false
				}
			})
		},
		//清除
		resetChecked(){		
			this.$refs.tree.setCheckedKeys([]);		
		}
  },
  created() {
  	this.loadRole()
  } 
}
</script>
<style>
.topNav{
	margin-left: 20px;
	margin-top: 5px;
	margin-bottom: 5px;
}
.tree{
	
}
</style>

